<template>
	<div class="container">
		<loading :show="isLoading" text="请稍候"></loading>
		<sticky :check-sticky-support="false" :offset="0">
			<x-header :title="goodsDetail.name" class="vux-1px-b">
				<a slot="right" @click="share" v-if="fenxiang === true">分享</a>
			</x-header>
		</sticky>
		<div style="padding:0 15px;margint-top:3px;">
			<Swiper :list="shopShow" auto dots-position="center" :aspect-ratio="500/375" class="goodsshow" dots-class="custom-bottom"></Swiper>
		</div>
		<div class="gooddetails">
			<p class="goodname">{{ goodsDetail.name }}</p>
			<!-- <p class="oldprice">￥{{ oldprice }}</p> -->
			<p class="price">￥{{ goodsDetail.price }} <span class="discount" v-if="discount" style="display:none;">{{ discounta }}</span></p>
			<!-- <p class="sendgood">
				<icon class="timeicon" type="waiting-circle"></icon>{{sendgood}}</p> -->
			<p class="servers vux-1px-b"><span class="title">服务</span> <span class="context">{{ servers }}</span></p>

			<div class="size" v-if="size.length > 0">规格<span class="dw"></span>
				<!-- <span class="sizeinfo" @click="vuex_is_sb">尺码指南
					<x-icon type="ios-arrow-right" size="12" style="float: right; margin-top: 3px;"></x-icon>
				</span> -->
			</div>

			<div class="sizecheck">
				<!-- <p v-for="(item, index) in size" :key="index"> -->
				<checker v-model="nowsize" default-item-class="demo1-item" selected-item-class="demo1-item-selected">
						<checker-item v-for="(val, key) in size" :key="key" :value="val.id" @click="hanldeSpec(val.id)">{{ val['规格名'] }}</checker-item>
				</checker>
				<!-- </p> -->
			</div>

			<group>
				<x-number title="数量" v-model="goods_num" :min="1" :max="20" style="font-weight:bold;"></x-number>
			</group>


			<!-- <p class="goodtitie">商品参数</p>
			<p class="goodsparameter" v-for="(item, index) in goodsinfo" :key="index">
				<span>{{ goods_attribute[item.attr_id] }}</span>
				<span>{{ item.attr_value }}</span>
			</p> -->

			<p class="goodtitie">商品详情</p>
			<!-- <p class="goodsparameter" v-for="(item, index) in goodsImage" :class="index==(goodsImage.length-1)?'vux-1px-b':''" :key="item"><img :src="serverUrl + item" alt="" class="infoimg" /></p> -->
			<p  >
				<span v-for="(item, key) in goodsDetail.description" :key="key"><img :src="item" width="100%" alt=""></span></p>
			<!-- <div class="size">尺码信息 <span class="dw">单位：CM</span>
				<span class="sizeinfo" @click="vuex_is_sb">尺码指南
					<x-icon type="ios-arrow-right" size="12" style="float: right; margin-top: 3px;"></x-icon>
				</span>
			</div> -->

			<!-- <div class="sizecheck vux-1px-b">
				<checker v-model="nowsize" default-item-class="demo1-item" selected-item-class="demo1-item-selected">
					<checker-item :value="item" v-for="(item,index) in size" :key="index">{{item}}</checker-item>
				</checker>
			</div> -->
		

			<!-- <p class="goodstitle vux-1px-b">{{tips}}</p> -->
			<!-- <p><img :src="Aftersale" alt="" class="infoimg" /></p> -->
		</div>

		<tabbar>
			<tabbar-item show-dot :badge="cartNum" class="vux-1px-r" :link="{path: '/GoodsCar/car', query: { discount: discount}}">
				<img slot="icon" src="">
				<span slot="label">购物袋</span>
			</tabbar-item>
			<tabbar-item>
				<span slot="label" v-on:click="addCart()">加入购物车</span>
			</tabbar-item>
			<tabbar-item>
				<span slot="label" @click="buyCart()">立即购买</span>
			</tabbar-item>
		</tabbar>

		<!-- <div v-transfer-dom>
			<popup v-model="showPopup" position="bottom" height="60%" :hide-on-blur="false">
				<div style="background: #fff; height: 100%; display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: flex-start;">
					<p class="sizelaytitle">尺码指南</p>
					<div class="sizelay">
						<ul>
							<li>A 项链长度(A1：最短长度；A2：最长长度)</li>
							<li>B 项链宽度</li>
							<li>C 吊坠宽度</li>
							<li>D 吊坠长度</li>
							<li>E 吊坠厚度</li>
							<li>F 吊坠直径</li>
							<li>G 手镯宽度</li>
							<li>H 手镯内圈直径</li>
						</ul>
					</div>
					<div class="mysure vux-1px-t" @click="onItemClick">确定</div>
				</div>
			</popup>
		</div> -->
		<toast text="加入成功" is-show-mask type="success" v-model="isToast"></toast>
		<!-- <div class="share">分享</div> -->
		<div v-transfer-dom>
			<confirm v-model="show5"
			show-input
			ref="confirm5"
			title="请输入折扣率"
			@on-cancel="onCancel"
			@on-confirm="onConfirm5"
			@on-show="onShow5"
			@on-hide="onHide">
			</confirm>
		</div>
	</div>
</template>

<script>
	import { getGoodsInfo, addCart, totalCart, getShare, makeOrder } from '@/api/Goods';
	import {
		Swiper,
		XHeader,
		XImg,
		Sticky,
		numberComma,
		Icon,
		Box,
		Checker,
		CheckerItem,
		TransferDom,
		Cell,
		Tabbar,
		TabbarItem,
		Popup,
		SwiperItem,
		Loading,
		Toast,
		XNumber,
		Group,
		Confirm
	} from 'vux'
	export default {
		name: 'GoodsInfo',
		directives: {
			TransferDom
		},
		components: {
			Swiper,
			XHeader,
			Sticky,
			XImg,
			Icon,
			Box,
			Checker,
			CheckerItem,
			Cell,
			Tabbar,
			TabbarItem,
			Popup,
			SwiperItem,
			Loading,
			Toast,
			XNumber,
			Group,
			Confirm
		},
		data() {
			return {
				goodsId: '0',
				isLoading: false,
				serverUrl: process.env.SERVER_URL,
				shopShow: [],
				goodname: '',
				oldprice: '',
				price: '',
				discount: '0',
				discounta: '0',
				sendgood: '',
				servers: '全场包邮 | 正品保障 | 买手推荐 | 七天无理由退货',
				size: [],
				nowsize: '',
				showPopup: false,
				goodsparameter: [],
				goodsinfo: [],
				goodstitle: "",
				tips: '图片及相关信息仅供参考，因拍摄灯光及不同显示器色差等问题可能造成商品图片与实物的色差，一切以实物为准。',
				Returntip: '非质量问题不参与7天无理由退换。',
				Aftersale: [],
				goods_attribute: [],
				cartNum: '0',
				isToast: false,
				goodsImage: [],
				goods_num: 1,
				goods_spec: [],
				item_id: '',
				openid: '',
				goodsDetail: {},
				// 分享
				show5: false,
				fenxiang: false
			}
		},
		mounted() {
			this.goodsInfo()
			// this.getTotalCart()
			// this.discount = this.$route.query.discount
			this.openid = sessionStorage.getItem('openid')
			// this.getFenxiang()
		},
		methods: {
			getFenxiang() {
				getShare({openid: sessionStorage.getItem('openid')}).then(response => {
					this.fenxiang = response.status
				})
			},
			vuex_is_sb() {
				var b = document.querySelectorAll('body')[0];
				b.style.overflow = "hidden";
				this.showPopup = true;
			},
			onItemClick(value, disabled) {
				console.log(this.disabled);
				if(!this.disabled) {
					var vuxsb = document.querySelectorAll('body')[0];
					vuxsb.style.overflow = "auto";
					this.showPopup = false
				}
			},
			// 获取商品详情
			goodsInfo() {
				this.isLoading = true
				getGoodsInfo({ a: 'goodsDetail', goodsId: this.$route.query.id }).then(response => {
					this.goodsDetail = response
					var image = [];
					image.push({ img: response.image, bigimg: '' });
					this.shopShow = image
					this.size = response['规格']
					if (response['规格'].length > 0) {
						this.nowsize = response['规格'][0].id
					}
					
					this.isLoading = false
				});
			},
			// 获取商品 item_id
			hanldeSpec(item_id) {
				this.item_id = this.goods_spec[index].item_id
			},
			// 添加购物车操作 
			addCart() {
				this.isLoading = true;
				var param = {
					a: 'addCart',
					goodsId: this.$route.query.id, 
					num: this.goods_num, 
					gg_id: this.nowsize, 
					// discount: this.discount 
				}
				addCart(param).then(response => {
					// console.log(response);
					this.cartNum = response[0]['count']
					this.isToast = true;
					this.isLoading = false;
				});
			},
			// 获取购物车商品总数
			getTotalCart() {
				totalCart().then(response => {
					this.cartNum = response.total
				});
			},
			// 立即购买 
			buyCart() {
				var param = {
					a: 'toBuy',
					gg_id: this.nowsize,
					goodsId: this.$route.query.id,
					num: this.goods_num
				}
				makeOrder(param).then(response => {
					console.log(response)
					this.$router.push({
						path: '/GoodsOrder/Goodsorder/1',
						query: {
							id: 1,
							order_id: response
						}
					})
				});
				
			},
			// 分享
			share() {
				// this.show5 = true;
				// 
				window.location.href = this.serverUrl + '/index.php?m=Mobile&c=Goods&a=shareGoods&openid='+ sessionStorage.getItem('openid') + '&goodsid=' + this.goodsId
			},
			// 分享弹框取消
			onCancel () {
				console.log('on cancel')
			},
			onHide () {
				console.log('on hide')
			},
			onShow5 () {
				this.$refs.confirm5.setInputValue('100')
			},
			onConfirm5 (value) {
				window.location.href = 'http://stock.30y.me/index.php?m=Mobile&c=Goods&a=shareGoods&openid='+ sessionStorage.getItem('openid') + '&goodsid=' + this.goodsId + '&discount=' + value
			},

		}
	}
</script>

<style scoped="" lang="less">
	@import '~vux/src/styles/close.less';
	.position-vertical-demo {
		background-color: #ffe26d;
		color: #000;
		text-align: center;
		padding: 15px;
	}
	
	.position-horizontal-demo {
		position: relative;
		height: 100%;
	}
	
	.gooddetails {
		font-size: 12px;
		text-align: left;
		padding: 10px 15px;
	}
	
	.goodname {
		font-size: 16px;
		color: #000;
		font-weight: 700;
		text-align: left;
		padding-bottom: 10px;
	}
	
	.oldprice {
		color: #ccc;
		text-decoration: line-through;
	}
	
	.price {
		font-size: 16px;
		font-weight: 700;
		color: #dd2828;
	}
	
	.discount {
		display: inline-block;
		padding: 1px;
		border: 1px solid #000;
		font-size: 12px;
		color: #333;
		margin-left: 6px;
	}
	
	.sendgood {
		padding: 10px 0;
	}
	
	.timeicon {
		color: #333!important;
		font-size: 16px!important;
	}
	
	.servers {
		padding: 15px 0;
		font-size: 14px;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: flex-start;
	}
	
	.title {
		width: 15%;
		flex: 0 1 auto;
		color: #333;
		font-weight: 600;
	}
	
	.context {
		width: 85%;
		flex: 0 1 auto;
		color:#999;
		font-size: 12px;
	}
	
	.goodtitie,
	.size {
		padding: 15px 0;
		font-weight: 700;
		color: #333;
		font-size: 16px;
		line-height: 18px;
	}
	
	.goodsparameter {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		padding-bottom: 10px;
	}
	
	.goodsparameter:last-child {
		padding-bottom: 20px;
	}
	
	.goodsparameter span {
		width: 40%;
		flex: 0 2 auto;
		font-size: 14px;
	}
	
	.goodsparameter span:nth-child(1) {
		color: #999;
	}
	
	.size .dw {
		font-size: 12px;
		font-weight: normal;
		color: #999;
		padding-left: 10px;
	}
	
	.sizeinfo {
		float: right;
		color: #666;
		font-size: 12px;
		font-weight: normal;
	}
	
	.sizelaytitle {
		font-size: 14px;
		font-weight: 700;
		padding: 15px 15px 0;
		height: 40px;
		flex: 0 1 auto;
	}
	
	.sizelay {
		flex: 1 1 auto;
		padding: 0 15px;
		font-size: 14px;
		color: #666;
	}
	
	.sizelay ul li {
		line-height: 24px;
	}
	
	.mysure {
		flex: 0 1 auto;
		height: 40px;
		line-height: 40px;
		width: 100%;
		text-align: center;
		font-size: 12px;
		color: #666;
	}
	
	.sizecheck {
		// margin-bottom: 30px;
		// padding-bottom: 15px;
	}
	
	.demo1-item {
		border: 1px solid #ececec;
		padding: 5px 15px;
		margin-right: 5px;
	}
	
	.demo1-item-selected {
		border: 1px solid #e01515;
	}
	
	.infoimglay {
		margin-bottom: 10px;
	}
	
	.infoimg {
		width: 100%;
	}
	
	.goodstitle {
		font-size: 12px;
		line-height: 18px;
		padding-bottom: 15px;
	}
	
	.container {
		background: #FFF;
	}
	
	.container .weui-tabbar {
		position: fixed;
		background: #FFF;
		font-size: 14px;
	}
	
	.container .weui-tabbar a:nth-child(1) {
		width: 20%;
		flex: 0 1 auto;
	}
	
	.container .weui-tabbar a:nth-child(2) span {
		color: #000!important;
		font-weight: 700;
		font-size: 16px;
	}
	
	.container .weui-tabbar a:nth-child(3) span {
		color: #dd2828!important;
		font-weight: 700;
		font-size: 16px;
	}
	
	.container {
		padding-bottom: 50px;
		overflow: hidden;
	}
	.weui-cell {
		padding: 10px 0;
	}
	// .share{
	// 	position: fixed;
	// 	right: 5px;
	// 	top:10px;
	// }
</style>